<template>
	<view class="manage-member">
		<view class="u-title">
			<view class="">参与人数</view>
			<view class="note">{{ members?.length || 0 }}/{{ peopleNum }}人</view>
		</view>
		<template v-if="members != false">
			<member-item v-for="(item, index) in members" :key="index" :info="item" :is-verify="item.is_verify > 0 ? true : false"
			@check="checkMemberInfo($event, index)"></member-item>
		</template>
		<empty-status v-else note="还没有人报名"></empty-status>
	</view>
	
	<fixed-footer>
		<primary-btn title="扫一扫身份验证" icon-type="scan" @btnClick="verifyQrcode" v-if="isStart"></primary-btn>
	</fixed-footer>
	<uni-popup ref="memberPopup" type="center" :is-mask-click="false">
		<view class="member-popup-content">
			<view class="close-ico" @click="$popupChange(this,'memberPopup')"><uni-icons type="closeempty" :size="20" color="#666"></uni-icons></view>
			<view class="title">队员信息</view>
			<member-item :show-check-btn="false" :info="clickUserInfo" :is-verify="clickUserInfo.is_verify > 0 ? true : false" ></member-item>
			<view class="info-part" v-if="isCharge && Object.keys(clickUserInfo) != false">
				<view class="part-title">费用明细</view>
				<view class="part-item">
					<text>{{ clickUserInfo.level_name }}：</text>
					<text class="note">¥{{ clickUserInfo.level_price }}（1份）</text>
				</view>
			</view>
			<view class="info-part" v-if="detailInfo.like_member">
				<view class="part-title">偏好信息</view>
				<view class="extra-info">
					{{ detailInfo.like_member }}
				</view>
			</view>
			<button class="btn popup-btn" hover-class="tap-hover" @click="outMember(clickUserInfo.level_no)" v-if="activityStatus == 2">踢出队伍</button>
		</view>
	</uni-popup>
	<modal ref="modal"></modal>
</template>

<script>
	import memberItem from '../components/member-item.vue'
	export default {
		components: {
			memberItem
		},
		data() {
			return {
				peopleNum: 0,
				activityId: 0,
				members: [],  // 报名的用户的列表
				detailInfo: {}, // 当前点击查看的队员报名信息
				clickUserInfo: {},  // 当前点击的队员信息
				checkMemberCurrentIndex: null,
				isCharge: true, // 是否收费活动
				isStart: false, //活动是否开始，活动开始后才可以验券
				activityStatus: 0
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('memberManage', (data) => {
				this.activityId = data.activityId
				this.peopleNum = data.peopleNum
				this.isCharge = data.isCharge
				this.activityStatus = data.activityStatus
				this.isStart = data.isStart
				this.getMembers()
			})
		},
		methods: {
			// 扫描验证二维码
			verifyQrcode() {
				uni.scanCode({
					success: async (codeRes) => {
						// ['activityId=1','userId=2']
						const arr = codeRes.result.split('&')
						//const activity_id = arr[0].split('=')[1],
						//	user_id = arr[1].split('=')[1]
						
						// if (activity_id != this.activityId) {
						// 	uni.showToast({
						// 		title: '当前用户未报名该活动',
						// 		icon: 'none'
						// 	})
						// 	return
						// }
						const level_no = arr[0].split('=')[1];
						const index = this.members.findIndex(item => item.level_no == level_no)
						if (this.members[index].is_verify > 0) {
							uni.showToast({
								title: '该队员已经验证',
								icon: 'none'
							})
							return
						}
						//const res = await this.$request.post('/api/activity/verify', {
						//	id: Number(activity_id), user_id: Number(user_id)
						//})
						const res = await this.$request.post('/api/activity/verify_by_level_no', {
							level_no: level_no
						})
						if (res.code == 200) {
							uni.showToast({
								title: '验证成功',
								icon: 'success'
							})
							
							// console.log(index);
							this.members[index].is_verify = 1
							/* setTimeout(() => {
								this.getMembers()
							}, 500) */
						}
					}
				})
			},
			// 踢出队伍
			outMember(level_no) {
				this.$refs.memberPopup.close()
				this.$refs.modal.show({
					content: '确定要将此用户踢出队伍吗？',
					btnDisplay: 'vertical',
					cancelText: '我再想想',
					success: async (res) => {
						if (res.confirm) {
							const user_id = this.detailInfo.user_id
							// /api/activity/out_team => /api/activity/out_team_by_level_no
							const result = await this.$request.post('/api/activity/out_team_by_level_no', {
								level_no: level_no,
								user_id: user_id,
							})
							if (result.code == 200) {
								uni.showToast({
									title: '此用户已被踢出队伍',
									icon: 'success',
								})
								this.members.splice(this.checkMemberCurrentIndex, 1)
							}
						} else {
							this.$refs.memberPopup.open()
						}
					}
				})
			},
			// 查看队员信息
			async checkMemberInfo(user, index) {
				this.checkMemberCurrentIndex = index
				this.clickUserInfo = user
				const id = this.activityId,
					user_id = user.id
				const res = await this.$request.get('/api/activity/member_info',{id, user_id})
				if (res.code == 200) {
					this.detailInfo = res.data
					this.$refs.memberPopup.open()
				}
			},
			// 获取队员列表
			async getMembers() {
				const id = this.activityId
				const res = await this.$request.get('/api/activity/activity_users',{id})
				if (res.code == 200) {
					if (res.data && res.data != false) {
						this.members = res.data
					}
				}
			},
 		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.manage-member {
		padding: 24rpx 30rpx;
	}
	.u-title {
		font-weight: bold;
		font-size: 36rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		.note {
			font-size: 28rpx;
			color: #999;
			font-weight: normal;
			padding-left: 20rpx;
		}
	}
	
	.member-popup-content {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		width: 640rpx;
		position: relative;
		.close-ico {
			position: absolute;
			top: 20rpx;
			right: 24rpx;
		}
		
		.title {
			font-size: 32rpx;
			padding-top: 12rpx;
			padding-bottom: 12rpx;
			text-align: center;
			font-weight: 500;
		}
		
		.info-part {
			margin-top: 32rpx;
			.part-title {
				font-weight: 500;
				margin-bottom: 12rpx;
			}
			.part-item {
				padding: 8rpx 0;
				font-size: 28rpx;
				.note {
					color: #666;
				}
			}
			.extra-info {
				width: 100%;
				border: 1px solid #f0f0f0;
				border-radius: 24rpx;
				height: 300rpx;
				padding: 24rpx;
			}
		}
		
		.popup-btn {
			height: 80rpx;
			line-height: 80rpx;
			background-color: $uni-color-primary;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 40rpx;
			margin-top: 40rpx;
		}
	}
	
</style>